<%--@elvariable id="user" type="com.genghis.ptas.security.entity.User"--%>
<%--@elvariable id="notAdmin" type="java.lang"--%>
<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->
<!-- BEGIN HEAD -->
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta content="" name="description"/>
    <meta content="" name="author"/>
    <base href="<%=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+"/scorm/ "%> "/>

    <!-- BEGIN PAGE LEVEL STYLES -->
    <link rel="stylesheet" type="text/css" href="assets/plugins/bootstrap-fileinput/bootstrap-fileinput.css"/>
    <link rel="stylesheet" type="text/css" href="assets/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">

    <!-- BEGIN GLOBAL MANDATORY STYLES -->
    <link href="corporate/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="corporate/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <!-- END GLOBAL MANDATORY STYLES -->

    <!-- BEGIN PAGE LEVEL PLUGIN STYLES -->
    <link href="corporate/plugins/fancybox/source/jquery.fancybox.css" rel="stylesheet"/>
    <!-- END PAGE LEVEL PLUGIN STYLES -->

    <!-- BEGIN THEME STYLES -->
    <link href="corporate/css/style-metronic.css" rel="stylesheet" type="text/css"/>
    <link href="corporate/css/style.css" rel="stylesheet" type="text/css"/>
    <link href="corporate/css/themes/blue.css" rel="stylesheet" type="text/css" id="style_color"/>
    <link href="corporate/css/style-responsive.css" rel="stylesheet" type="text/css"/>
    <link href="corporate/css/pages/portfolio.css" rel="stylesheet" type="text/css"/>
    <link href="corporate/css/custom.css" rel="stylesheet" type="text/css"/>
    <!-- END THEME STYLES -->
    <style type="text/css">
        body {
            background-color: white !important;
        }
    </style>
</head>
<!-- END HEAD -->

<!-- BEGIN BODY -->
<body>
<div class="page-container">
    <div class="row breadcrumbs margin-bottom-20">
        <div class="container">
            <div class="col-md-4 col-sm-4">
                <h1>我的个人资料</h1>
            </div>
        </div>
    </div>
    <div style="margin-right: 100px">
        <c:if test="${user.roleId==2}">
        <div style="margin-left: 60px;margin-right: 100px">
            </c:if>
            <div class="page-content" style="margin-left: 100px !important;margin-right: 100px !important;">
                <!-- BEGIN PAGE CONTENT-->
                <div class="row profile">
                    <div class="col-md-12">
                        <!--BEGIN TABS-->
                        <div class="tabbable tabbable-custom tabbable-full-width">

                            <div class="tab-content">
                                <div class="tab-pane active" id="tab">
                                    <div class="row profile-account">
                                        <div class="col-md-3">
                                            <ul class="ver-inline-menu tabbable margin-bottom-10">
                                                <li class="active">
                                                    <a data-toggle="tab" href="#tab_1-1">
                                                        <i class="fa fa-cog"></i> 个人信息
                                                    </a>
                                                </li>
                                                <li>
                                                    <a data-toggle="tab" href="#tab_2-2">
                                                        <i class="fa fa-picture-o"></i> 修改头像
                                                    </a>
                                                </li>
                                                <li>
                                                    <a data-toggle="tab" href="#tab_3-3">
                                                        <i class="fa fa-lock"></i> 修改密码
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col-md-9">
                                            <div class="tab-content">
                                                <div id="tab_1-1" class="tab-pane active">
                                                    <form class="info_form" action="" method="post">
                                                        <div class="form-group">
                                                            <label class="control-label" for="userName">姓名</label>
                                                            <input type="text" name="userName" id="userName"
                                                                   value="${user.userName}"
                                                                   class="form-control"/>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="control-label" for="phone">手机号</label>
                                                            <input type="text" name="phone" id="phone"
                                                                   value="${user.userBaseInfo.phone}"
                                                                   class="form-control"/>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="control-label" for="email">邮箱</label>
                                                            <input type="text" value="${user.userBaseInfo.email}"
                                                                   id="email"
                                                                   name="email"
                                                                   class="form-control"/>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="control-label" for="address">家庭住址</label>
                                                            <input type="text" value="${user.userBaseInfo.address}"
                                                                   id="address"
                                                                   name="address"
                                                                   class="form-control"/>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="control-label" for="career">职业</label>
                                                            <input type="text" value="${user.userBaseInfo.career}"
                                                                   id="career"
                                                                   name="career"
                                                                   class="form-control"/>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="control-label" for="education">学历</label>
                                                            <input type="text"
                                                                   value="${user.userBaseInfo.showEducation}"
                                                                   id="education"
                                                                   name="education" class="form-control"/>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="control-label" for="country">国家</label>
                                                            <input type="text" value="${user.userBaseInfo.country}"
                                                                   name="country"
                                                                   id="country"
                                                                   class="form-control"/>
                                                        </div>
                                                        <div class="margiv-top-10">
                                                            <button type="submit" id="register-submit-btn"
                                                                    class="btn green">
                                                                保存
                                                            </button>
                                                        </div>
                                                    </form>
                                                </div>
                                                <div id="tab_2-2" class="tab-pane">
                                                    <form action="" id="upPhotoForm" method="post"
                                                          enctype="multipart/form-data">
                                                        <div class="form-group">
                                                            <div class="fileinput fileinput-new"
                                                                 data-provides="fileinput">
                                                                <div class="fileinput-new thumbnail"
                                                                     style="width: 200px; height: 150px;">
                                                                    <img src="${user.userBaseInfo.photoUrl}" alt=""/>
                                                                </div>
                                                                <div class="fileinput-preview fileinput-exists thumbnail"
                                                                     style="max-width: 200px; max-height: 150px;">
                                                                </div>
                                                                <div>
                                                            <span class="btn red btn-file">
                                                            <span class="fileinput-new">
                                                                 选择头像
                                                            </span>
                                                            <span class="fileinput-exists">
                                                                 修改
                                                            </span>
                                                            <input type="file" name="upPhoto" id="upPhoto">
                                                            </span>
                                                                    <a href="#" class="btn default fileinput-exists"
                                                                       data-dismiss="fileinput">
                                                                        移除
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="margin-top-10">
                                                            <a href="javascript:" class="btn red" onclick="upPhoto()">
                                                                保存
                                                            </a>
                                                        </div>
                                                    </form>
                                                </div>
                                                <div id="tab_3-3" class="tab-pane">

                                                    <form action="" method="POST" class="passwordForm">

                                                        <div class="form-group">
                                                            <label class="control-label" for="oldPassword">请新密码</label>
                                                            <input type="password" id="oldPassword" name="oldPassword"
                                                                   class="form-control"/>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="control-label" for="password">请输入新密码</label>
                                                            <input type="password" id="password" name="password"
                                                                   class="form-control"/>
                                                        </div>
                                                        <div class="form-group">
                                                            <label class="control-label"
                                                                   for="rePassword">请重新输入新密码</label>
                                                            <input type="password" id="rePassword" name="rePassword"
                                                                   class="form-control"/>
                                                        </div>
                                                        <div class="margin-top-10">

                                                            <button type="submit" class="btn green pull-left">
                                                                保存
                                                            </button>

                                                        </div>
                                                    </form>

                                                </div>
                                            </div>
                                        </div>
                                        <!--end col-md-9-->
                                    </div>
                                </div>
                            </div>
                            <!--END TABS-->
                        </div>
                    </div>
                </div>
                <!-- END PAGE CONTENT-->
                <!-- END CONTENT -->
            </div>

            <c:if test="${user.roleId==2}">
        </div>
        </c:if>
    </div>
</div>

<!-- BEGIN CORE PLUGINS -->
<!--[if lt IE 9]>
<script src="assets/plugins/respond.min.js"></script>
<script src="assets/plugins/excanvas.min.js"></script>
<![endif]-->
<script src="assets/plugins/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/plugins/bootstrap-hover-dropdown/bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="assets/plugins/jquery.cokie.min.js" type="text/javascript"></script>
<script src="assets/plugins/uniform/jquery.uniform.min.js" type="text/javascript"></script>

<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="assets/plugins/jquery-validation/dist/jquery.validate.min.js" type="text/javascript"></script>
<script type="text/javascript" src="assets/plugins/bootstrap-fileinput/bootstrap-fileinput.js"></script>
<script src="assets/scripts/core/app.js"></script>
<!-- END PAGE LEVEL PLUGINS -->

</body>
<!-- END BODY -->
</html>
<script>
    jQuery(document).ready(function () {
        App.init();
        top.initPhotoUrl();
        parent.browserSizeDeal(8, document.body.clientHeight + 100);
    });

    function upPhoto() {
        $("#upPhotoForm").attr("action", "person/upPhoto?upPhoto=" + $("#upPhoto").val() + "$userId=${user.id}").submit();
        top.bootbox.alert("修改成功！");
    }

    $('.info_form').validate({
        errorElement: 'span', // default input error message container
        errorClass: 'help-block', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        ignore: "",
        rules: {
            phone: {
                required: false
            },
            email: {
                required: false,
                email: true
            },
            address: {
                required: false
            },
            country: {
                required: false
            },
            userName: {
                required: false
            }
        },

        messages: { // custom messages for radio buttons and checkboxes
        },

        invalidHandler: function (event, validator) { //display error alert on form submit
        },

        highlight: function (element) { // hightlight error inputs
            $(element).closest('.form-group').addClass('has-error');
            // set error class to the control group
        },

        success: function (label) {
            label.closest('.form-group').removeClass('has-error');
            label.remove();
        },

        errorPlacement: function (error, element) {
            if (element.attr("name") == "tnc") { // insert checkbox errors after the container
                error.insertAfter($('#register_tnc_error'));
            } else if (element.closest('.input-icon').size() === 1) {
                error.insertAfter(element.closest('.input-icon'));
            } else {
                error.insertAfter(element);
            }
        },

        submitHandler: function () {
            $.ajax({
                url: "person/editUserInfo",
                data: {
                    userName: $("#userName").val().trim(),
                    roleId: ${user.roleId},
                    loginName: "${user.loginName}",
                    password: "${user.password}",
                    phone: $("#phone").val().trim(),
                    email: $("#email").val().trim(),
                    address: $("#address").val().trim(),
                    career: $("#career").val().trim(),
                    showEducation: $("#education").val().trim(),
                    country: $("#country").val().trim(),
                    userId: ${user.id},
                    photoUrl: '${user.userBaseInfo.photoUrl}',
                    id: ${user.userBaseInfo.id}
                },
                async: false,
                dataType: 'json',
                type: "POST",
                success: function () {
                    top.bootbox.alert("修改成功！");
                }
            });
        }
    });

    $('.info_form div input').keypress(function (e) {
        if (e.which == 13) {
            var info_form = $('.info_form');
            if (info_form.validate().form()) {
                info_form.submit();
            }
            return false;
        }
    });

    $('.passwordForm').validate({
        errorElement: 'span', // default input error message container
        errorClass: 'help-block', // default input error message class
        focusInvalid: false, // do not focus the last invalid input
        ignore: "",
        rules: {
            oldPassword: {
                required: true,
                remote: {
                    url: "admin/user/checkUserPassword",
                    type: "post",
                    data: {
                        oldPassword: function () {
                            return $("#oldPassword").val();
                        }
                    }
                }
            },
            password: {
                required: true
            },
            rePassword: {
                equalTo: "#password"
            }
        },

        messages: { // custom messages for radio buttons and checkboxes
            oldPassword: {
                required: "请输入密码 ！",
                remote: "密码输入错误 !"
            },
            password: {
                required: "请输入新密码 ！"
            },
            rePassword: {
                equalTo: "与新密码输入不一致 ！"
            }
        },

        invalidHandler: function (event, validator) { //display error alert on form submit
        },

        highlight: function (element) { // hightlight error inputs
            $(element).closest('.form-group').addClass('has-error');
            // set error class to the control group
        },

        success: function (label) {
            label.closest('.form-group').removeClass('has-error');
            label.remove();
        },

        errorPlacement: function (error, element) {
            if (element.attr("name") == "tnc") { // insert checkbox errors after the container
                error.insertAfter($('#register_tnc_error'));
            } else if (element.closest('.input-icon').size() === 1) {
                error.insertAfter(element.closest('.input-icon'));
            } else {
                error.insertAfter(element);
            }
        },

        submitHandler: function () {
            $.ajax({
                url: "admin/user/editUserPassword",
                data: {
                    password: $("#password").val(),
                    loginName: ${user.loginName}
                },
                async: false,
                dataType: 'json',
                type: "POST",
                success: function () {
                    top.bootbox.alert("密码修改成功！");
                    $("#password").val("");
                    $("#oldPassword").val("");
                    $("#rePassword").val("");
                }
            });
        }
    });

    $('.passwordForm div input').keypress(function (e) {
        if (e.which == 13) {
            var passwordForm = $('.passwordForm');
            if (passwordForm.validate().form()) {
                passwordForm.submit();
            }
            return false;
        }
    });

</script>
